<template>
  <!--建议使用v-container来控制布局-->
  <v-container>
    <!--横幅-->
    <v-row>
      <v-col>
        <v-banner two-line>
          <!--小图标-->
          <v-avatar slot="icon" color="deep-purple accent-4" size="40">
            <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
          </v-avatar>
          <!--文字介绍-->
          一个简易的首页
          <template v-slot:actions>
            <v-btn text color="deep-purple accent-4">Login</v-btn>
            <v-btn text color="deep-purple accent-4">Register</v-btn>
          </template>
        </v-banner>
      </v-col>
    </v-row>
    <!--信息卡片-->
    <v-row justify="center" class="mt-6">
      <v-col md="3">
        <v-img src="../assets/logo.png" alt="商标" width="160" class="mx-auto"></v-img>
        <h2 class="text-center mt-3">欢迎使用后台管理系统！</h2>
        <v-card-text class="text-center">
          您可以在本系统中使用后台管理相关功能，请先完成注册登录
        </v-card-text>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>

export default {
  name: 'Home'
}
</script>
